 <template>
     <page class="saveCollection">
         <page-header :showBack="true">收藏列表</page-header>
         <div class="content">
             <!--代表每一项收藏 -->
             <p class="tips" v-if="itemList.length==0">暂无收藏记录</p>
             <slide-left @delete="itemDelete" v-for="(item,index) in itemList" :key="index">
                 <div class="item" @click="$router.push({name:'detail',query:{id:item.id}})">
                     <div class="left">
                         <img v-lazy="item.img" alt="">
                     </div>
                     <div class="right">
                         <div class="mn">{{item.nm}}</div>
                         <div class="time">{{item.s_time}}</div>
                     </div>
                 </div>
             </slide-left>
         </div>
     </page>
 </template>

 <script>
     import slideLeft from "../components/slideLeft.vue";
     export default {
         name: "saevCollection",
         data() {
             return {
                 itemList: []
             }
         },
         created() {
             var saveCollection = localStorage.getItem("saveCollection");
             if (saveCollection != null) {
                 this.itemList = JSON.parse(saveCollection);
             }
         },
         methods: {
             itemDelete(event) {
                 this.$confirm("确定要删除吗?")
             }
         },
         components: {
             slideLeft
         }
     }
 </script>

 <style lang="scss" scoped>
     @import "../assets/css/comm.scss";

     .saveCollection {
         @include flexbox(column);

         .content {
             flex: 1;
             overflow: auto;

             .tips {
                 color: #cccccc;
                 font-size: .36rem;
                 @include flexbox();
                 justify-content: center;
                 margin-top: .2rem;
             }

         }
     }

     .item {
         @include flexbox();
         background-color: #ffffff;
         position: relative;
         z-index: 1;
         transition: all 0.2s linear;

         .left {
             width: 1.2rem;
             height: 1.2rem;
             box-sizing: border-box;
             padding: .1rem;

             >img {
                 width: 100%;
                 height: 100%;
                 display: block;
             }
         }

         .right {
             flex: 1;
             @include flexbox(column);
             justify-content: space-around;
             margin-left: .2rem;

             .mn {
                 font-size: .28rem;
             }

             .time {
                 font-size: .24rem;
                 color: #999999;
             }
         }


     }
 </style>